<template>
    <div>
        <Breadcrumb style="margin:10px">
            <BreadcrumbItem :to="{name:'dashboard'}">Home</BreadcrumbItem>
            <BreadcrumbItem :to="{name:'roles'}">角色列表</BreadcrumbItem>
            <BreadcrumbItem>角色授权</BreadcrumbItem>
        </Breadcrumb>

        <div class="content">
                <Card>
                  <Form ref="formData" :label-width="80" style="width: 800px">
                        <FormItem label="角色" prop="roleName">
                            <span>{{ roleName }}</span>
                        </FormItem>
                        <FormItem label="所属系统" prop="roleSystem">
                            <span>{{ roleSystem }}</span>
                        </FormItem>
                        <FormItem label="权限选择" prop="permissions">
                            <Transfer
                            :data="allPermissions"
                            :target-keys="selectPermissions"
                            :list-style="listStyle"
                            filterable
                            :filter-method="filterMethod"
                            :titles="titles"
                            @on-change="handleChange1"></Transfer>
                        </FormItem>


                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formData')" :disabled="subDisable">保存</Button>
                            <Button @click="handleReset('formData')" style="margin-left: 8px">重置</Button>
                        </FormItem>
                    </Form>
                </Card>
        </div>

    </div>
</template>
<script>
export default {
        data () {
            return {
                roleId:0,
                roleName:'',
                roleSystem : '',
                subDisable: false,
                allPermissions: [],
                listStyle: {
                    width: '250px',
                    height: '300px'
                },
                titles : ["所有权限","已选权限"],
                selectPermissions: []
            }
        },
        created() {
            this.queryData();
        },
        methods: {
            handleSubmit (name) {
                this.subDisable = true;
                if(this.roleId > 0) {
                    let params = {
                        id:parseInt(this.roleId),
                        permissions:this.selectPermissions
                    }
                     this.$axios
                         .post(this.$API.PERMISSION_ROLE_EDIT, params)
                         .then(response => {
                            console.log(response);
                            if(response.data && response.data.rc == '0') {
                                this.$Message.success('成功!');
                            } else if (response.data.rc == '-3003') {
                                this.$Message.error('未登陆!');
                            } else if (response.data.rc == '-4001') {
                                this.$Message.error('无权访问!');
                            } else {
                                this.$Message.error('失败!');
                            }
                            this.subDisable = false;
                        });
                }
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            queryData() {
                this.roleId = this.$route.params.id;
                this.subDisable = true;
                if(this.roleId > 0) {
                    let params = {
                        id:parseInt(this.roleId)
                    }
                    this.$axios
                     .post(this.$API.PERMISSION_ROLE_SHOW, params)
                     .then(response => {
                        console.log(response);
                        if(response.data && response.data.rc == '0') {
                            this.roleName = response.data.name;
                            this.roleSystem = response.data.system;
                            if(response.data.permissions) {
                                for(let p in response.data.permissions) {
                                    this.selectPermissions.push(response.data.permissions[p].permission);
                                }
                            }

                            this.getAllPermissions(this.roleSystem);

                        } else {
                            this.$Message.error('错误!');
                        }
                        this.subDisable = false;
                    });
                    
                } else {
                    this.$Message.error('错误!');
                }

            },
            handleChange1 (newTargetKeys, direction, moveKeys) {
                this.selectPermissions = newTargetKeys;
            },
            getAllPermissions (sys) {
                let params = {
                    sys : sys,
                    size : 500
                };
                 this.$axios
                 .post(this.$API.PERMISSION_PERM_LIST, params)
                 .then(response => {
                        
                        if(response.data && response.data.rc == '0') {
                            this.allPermissions = [];
                            for(let i in response.data.list) {
                                let pname = response.data.list[i].name;
                                let permission = response.data.list[i].permission;

                                let o = {
                                    key: permission,
                                    label: pname + '('+permission+')',
                                    description: '',
                                    disable: false
                                }
                                this.allPermissions.push(o);
                            }
                        }

                 });
            },
            filterMethod (data, query) {
                return data.label.indexOf(query) > -1;
            }
        }
    }
</script>

